<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <title>疫情上报系统-管理员</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!--    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
    <script src="https://cdn.bootcss.com/axios/0.19.0/axios.js"></script>
</head>
<body>
<div id="app">
    <el-container>
        <el-main>
            <template>
                <el-row>
                    <el-col :lg="{span:4,offset:10}" :xs="{span:16,offset:4}">
                        <div class="block">
                            <el-tag type="warning">导出温度统计Excel</el-tag>
                            <el-date-picker
                                    format="yyyy-MM-dd"
                                    value-format="yyyy-MM-dd"
                                    @change="selectTime"
                                    v-model="value1"
                                    type="date"
                                    placeholder="选择日期">
                            </el-date-picker>
                        </div>
                    </el-col>

                </el-row>
            </template>
            <div class="main">
               <el-col :lg="{span:4,offset:10}" :xs="{span:16,offset:4}">
                <el-row type="flex" class="row-bg" justify="center" :lg="{span:4,offset:10}" :xs="{span:16,offset:4}">
                    <el-button round type="success" size="medium" plain @click="submit">生成报表
                    </el-button>
                </el-row>
               </el-col>
            </div>
        </el-main>

    </el-container>
</div>
</body>
<!-- import Vue before Element -->
<!--<script src="https://unpkg.com/vue/dist/vue.js"></script>-->
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.common.dev.js"></script>
<!-- import JavaScript -->
<!--<script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
<script src="https://cdn.bootcss.com/element-ui/2.12.0/index.js"></script>
<script>  var day;

function dateFormat(fmt, date) {
    let ret;
    const opt = {
        "Y+": date.getFullYear().toString(),        // 年
        "m+": (date.getMonth() + 1).toString(),     // 月
        "d+": date.getDate().toString(),            // 日
        "H+": date.getHours().toString(),           // 时
        "M+": date.getMinutes().toString(),         // 分
        "S+": date.getSeconds().toString()          // 秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
    };
    for (let k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
            fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
        }
        ;
    }
    ;
    return fmt;
}

new Vue({
    el: '#app',

    data: {
        value1: "",
    }
    , methods: {
        selectTime: function (value1) {
            day = value1
        }, submit: function () {
            if (day != null) {
                axios.post('/selectTempByDay', {day: day}, {responseType: 'blob'})
                    .then(function (response) {
                        console.log("成功");
                        // let url = window.URL.createObjectURL(new Blob([response.data]));
                        // let link = document.createElement('a');
                        // link.style.display ='none';
                        // link.href = url;
                        // link.setAttribute('download','excel.xls');
                        // document.body.appendChild(link);
                        // link.click();
                        let url = window.URL.createObjectURL(response.data);
                        console.log(url);
                        var a = document.createElement("a");
                        document.body.appendChild(a);
                        a.href = url;
                        a.download = "疫情统计报表" + dateFormat("YYYY-mm-dd", new Date());
                        a.click();
                        window.URL.revokeObjectURL(url);
                        alertMessage('导出成功')
                    })
                    .catch(function (error) {
                        console.log(error);
                        console.log("不存在");
                        alertMessage('错误', '发生异常', 'error');
                    });
                var notify = this.$notify;

                function alertMessage(title, message, type) {
                    notify({
                        title: title,
                        message: message,
                        type: type,
                        duration: 3000,
                        position: 'bottom-right',
                        offset: 100
                    });
                }

            }

        }

    }
});

</script>
<style>
    .el-row {
        padding: 5px;
    }

    #app {

        background: url('/static/images/bg.jpg');


        height: 100%;

        width: 100%;

        overflow: hidden;

        background-size: cover;
    }

    html, body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        font: 14px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
        -webkit-font-smoothing: antialiased;
    }

    .el-main {
        margin-top: 150px;

    }

    .el-button {
        margin-top: 50px;
    }
</style>
</html>